<template>
    <div>
        <dz-header title="朋友圈"></dz-header>
        <h1 style="color:red;">Friends.vue 朋友圈</h1>
        <h3>{{ nowTime | formaDate }}</h3>
    </div>
</template>

<script>
import dzHeader from '@/components/tabbar/Header'
export default {
    name: 'Friends',
    components: {
        dzHeader,
    },
    data() {
      return {
        nowTime: new Date()
      }
    },
    filters: {
        formaDate: () => {
            let timeStamp = new Date()
            let year = new Date(timeStamp).getFullYear();
            let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
            let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
            let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
            let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
            let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
            return `当前时间:${ year }年${ month }月${ date }日${hh}:${mm}:${ss}`
        }
    },
    mounted() {
        let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            // _this.nowTime = new Date();// 修改数据date
            _this.nowTime = new Date();
        }, 1000);
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);// 在Vue实例销毁前，清除我们的定时器
        }
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
h1 {
    margin-top: 64px;
}
</style>